<template>
	<view class="user-container">
		<u-navbar bgColor="#1A1A1A" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="right">
				<!-- 正文内容 -->
				<text @click="submit">完成</text>
			</view>
		</u-navbar>
		<!-- 头像区域 -->
		<view class="user-avtar">
			<u-avatar :src="src" size="90"></u-avatar>
		</view>
		<!-- 用户表单区域 -->
		<view class="user-form">
			<u-form labelPosition="top" :model="userInfo">
				<u-form-item label="昵称" prop="nickname">
					<u--input v-model="userInfo.nickname" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入昵称"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<u--input v-model="userInfo.sex" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入性别"></u--input>
				</u-form-item>
				<u-form-item label="地区" prop="birthplace">
					<u--input v-model="userInfo.birthplace" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入地区"></u--input>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" @click="show=true">
					<u--input v-model="userInfo.birthday" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请选择生日"></u--input>
				</u-form-item>
				<u-form-item label="简介" prop="introduction">
					<u--input v-model="userInfo.introduction" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入个人简介"></u--input>
				</u-form-item>
			</u-form>
		</view>
		<u-datetime-picker @confirm="confirm" :show="show"
			v-model="value1" mode="date" @cancel="cancel"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		userInfo,
		updateUser
	} from "@/api/my"
	import {
		TOAST,formatTime
	} from "@/utils/utils.js"
	export default {
		data() {
			return {
				src: "../../static/imgs/user-avtar.png",
				userInfo: {},
				userId: "",
				show: false,
				value1: Number(new Date()),
			};
		},
		created() {
			this.userId = uni.getStorageSync("userId")
			this.getUserData()
		},
		
		methods: {
			// 获取用户信息
			getUserData() {
				userInfo(this.userId).then(res => {
					this.userInfo = res.data.userInfo
					if (this.userInfo.sex === 1) {
						this.userInfo.sex = "男"
					} else {
						this.userInfo.sex = "女"
					}
				})
			},
			// 提交用户信息
			submit() {
				updateUser(this.userId, {
					birthday: this.userInfo.birthday,
					birthplace: this.userInfo.birthplace,
					introduction: this.userInfo.introduction,
					nickname: this.userInfo.nickname,
					sex: this.userInfo.sex === '男' ? 0 : 1
				}).then(res => {
					if (res.code === 200) {
						setTimeout(()=>{
							TOAST("修改成功")
						},1000)
						this.getUserData()
						uni.navigateBack()
					} else {
						TOAST(res.message)
					}
				})
			},
			confirm(val) {
				this.userInfo.birthday=formatTime(val.value)
				this.show=false
			},
			cancel(){
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.placeholderClass {
		text-align: center;
		color: #FFFFFF;
	}

	/deep/.u-input {
		background-color: #000000;
	}

	.user-container {
		height: 100%;
		background-color: #1A1A1A;
		overflow-y: auto;
		padding: 0 80rpx;

		.u-nav-slot {
			font-weight: 400;
			font-size: 40rpx;
		}

		.user-avtar {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
